---
# title: "Install Tailwind CSS with Vue 3 and Vite"
title: "在 Vue 3 和 Vite 安装 Tailwind CSS"
# description: "Setting up Tailwind CSS in a Vue 3 and Vite project."
description: "在 Vue 3 和 Vite 工程中配置 Tailwind CSS。"
tool: Vue 3 and Vite
---

```preval installation
tool: Vite
script: npx create-vite-app 
npmInstall: true
```

---

```preval setup
dev: true
version: compat-7
```

```preval configuration
purge:
  - ./index.html
  - ./src/**/*.{vue,js,ts,jsx,tsx}
```

```preval include
tool: Vite
file: ./src/index.css
withChromiumBug: true
```

<!-- Finally, ensure your CSS file is being imported in your `./src/main.js` file: -->
最后，确保您的 CSS 文件被导入到您的 `./src/main.js` 文件中。

```js
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')
```

---

```preval finish
scripts:
  - npm run dev
```

